<template>
	<view class="user-box">
		<view class="head_box">
			<image class="user-bg" src="../../static/imgs/user/user_bg.png" mode=""></image>
			<view class="head-wrap pad">
				<!-- #ifdef APP-PLUS -->
				<view class="topPlace"></view>
				<!-- #endif -->
				<view class="titleNav " style="display: flex;justify-content: space-between;align-items: center;">
					<view class="" style="width: 10rpx;"></view>
					<text class="nav-title x-f" style="color: #fff;height: 88upx;justify-content: center;">我的</text>
					<image src="../../static/imgs/user/set.png" style="height: 36rpx;width: 36rpx;margin-top: 160rpx;" @tap="clearStorage()"></image>
				</view>
				<view class="user-head x-bc" @tap="jump('/pages/user/set/info')">
					<view class="x-f" style="width: 56%;">
						<view class="info-box">
							<view class="x-f" style="width: 100%;">
								<view class="head-img-wrap">
									<image class="head-img"
										:src="wxurl || '/static/imgs/avatar.png'"
										mode="aspectFill"></image>
								</view>
								<view>
									<view @tap.stop="jump('/pages/user/set/info')" class="user-name"
										style="color: #fff;display: block;margin-bottom: 10upx;width: auto;">
										{{username}}
									</view>
									<view class="grade-tag tag-box x-f jui_flex jui_flex_justify_center"
										@tap.stop="jump('/pages/user/uplevel')" style="width: 158upx;height: 40rpx">
										<text class="tag-title "
											style="color: #fff;">{{supperNodeName}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="position: relative;margin-top: -30upx;">

			<!-- 订单卡片 -->
			<view class="order-wrap">
				<view
					style="height: 90upx;padding: 0 30upx; display: flex;align-items: center;justify-content: space-between;border-bottom: 1px solid #f7f7f7;">
					<text style="font-size: 32upx;color: #333;font-weight: 600;">我的订单</text>
					<view style="display: flex;align-items: center;font-size: 28upx;color: #999;"
						@tap="jump('/pages/user/order/orderList?type=0')">
						<text>全部订单</text>
						<image src="../../static/imgs/home/right.png"
							style="width: 13upx;height: 24upx;margin-left: 10rpx;"></image>
					</view>
				</view>
				<view class="order-box x-f">
					<view class="order-item y-f" @tap="jump(`/pages/user/order/orderList?tabIndex=${order.tabIndex}`)"
						v-for="order in orderNav" :key="order.id">
						<view class="y-f item-box">
							<image class="order-img" :src="order.img" mode=""></image>
							<text class="item-title">{{ order.title }}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 功能卡片 -->
			<view class="tools-box">
				<view class="tool-item " @tap="jump(tool.url, tool.title)" v-for="tool in toolsNav" :key="tool.title">
					<image class="tool-img" :src="tool.img" mode=""></image>
					<view class="jui_flex jui_flex_items_center jui_flex_justify_between"
						style="width: 90%;border-bottom:1px solid #f6f6f6;padding: 34rpx 0;">
						<view class="item-title">{{ tool.title }}</view>
						<image src="../../static/imgs/home/right.png" style="width: 16rpx;height: 26rpx;" mode="">
						</image>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		components: {
			
		},
		data() {
			return {
				userInfo: {},
				wxurl:'',
				supperNodeName:'',
				username:'',
				orderNav: [{
						title: '待发货',
						img: '/static/imgs/user/tab22.png',
						tabIndex: 1
					},
					{
						title: '待收货',
						img: '/static/imgs/user/tab33.png',
						tabIndex: 2
					},
					{
						title: '已完成',
						img: '/static/imgs/user/tab44.png',
						tabIndex: 3
					}
				],
				toolsNav: [{
						title: '账号资料',
						img: '../../static/imgs/user/my_icon2.png',
						url: '/pages/user/set/set'
					},
					{
						title: '我的地址',
						img: '../../static/imgs/user/my_icon1.png',
						url: '/pages/user/address/addressList'
					},
					{
						title: '我的购物车',
						img: '../../static/imgs/tabbar/tab_wz_sel.png',
						url: '/pages/cart/cart'
					},
					// {
					// 	title: '兑换记录',
					// 	img: '../../static/imgs/user/my_icon4.png',
					// 	url: '/pages/user/wallet/detail/duihuanlog'
					// },
					{
						title: '邀请好友',
						img: '../../static/imgs/user/invite.png',
						url: '/pages/user/invite/invite'
					},
					{
						title: '我的团队',
						img: '../../static/imgs/user/my_icon7.png',
						url: '/pages/user/team/team'
					},
					{
						title: 'K线图',
						img: '../../static/imgs/user/my_icon7.png',
						url: '/pages/user/k_line/k_line'
					},
					
					{
						title: '下载APP',
						img: '../../static/imgs/user/xiazai.png',
						url: '/pages/user/download/download'
					},
					{
						title: '联系客服',
						img: '../../static/imgs/user/my_icon8.png',
						url: '/pages/user/kefu'
					},
				]
			};
		},
		onLoad() {

		},
		onShow() {
			this.getUser();
		},
		methods: {
			getUser() {
				let userId = uni.getStorageSync('uid');
				let _token = uni.getStorageSync('token');
				let params ={
					_token:_token,
					userId:userId
				}
				this.$api.myInfor(params).then(res => {
					if (res.ok) {
						let url = res.data.wxurl
						let urlObj = url.split('download')
						this.wxurl = urlObj[2] ? urlObj[0]+'download'+urlObj[2] : urlObj[0]+'download'+urlObj[1]
						this.supperNodeName = res.data.supperNodeName
						this.username = res.data.username
					}
				});
			},
			//联系客服
			getService() {
				// #ifdef H5
				window.open('https://chatlink.meiqia.cn/widget/standalone.html?eid=64a417fcdebee03189e9f3f2fe83e3ae', true)
				//#endif
				// #ifndef H5
				this.jump('/pages/user/kefu')
				//#endif
			},
			getStorageSize:function(){
				let that = this;
				uni.getStorageInfo({
					success(res) {
						console.log(res.keys);
						console.log(res.limitSize);
						let size = res.currentSize;
						if (size < 1024) {
							that.storageSize = size + ' B';
						} else if (size/1024>=1 && size/1024/1024<1) {
							that.storageSize = Math.floor(size/1024*100)/100 + ' KB';
						} else if (size/1024/1024>=1) {
							that.storageSize = Math.floor(size/1024/1024*100)/100 + ' M';
						}
					}
				})
			},
			clearStorage(){
				let that = this;
				uni.showModal({
					title:'提示',
					content:'确定清除缓存吗?',
					confirmText:'立即清除',
					success(res) {
						if(res.confirm){
							uni.clearStorageSync();
							//重新获取并显示清除后的缓存大小
							that.getStorageSize();
							uni.showToast({
								title:'清除成功'
							})
						}
					}
				})
			}
		}
	};
</script>

<style lang="scss">
	.topPlace {
		width: 100%;
		height: var(--status-bar-height);
		background: transparent;
	}

	.user-box {
		overflow-x: hidden;
	}

	// 微信登录蒙层
	.login-box {
		position: fixed;
		z-index: 9999;
		width: 100%;
		height: 100%;
		background: none;
	}

	.head_box {
		position: relative;
		height: 400rpx;
		// #ifdef APP-PLUS
		height: 480rpx;

		// #endif
		.user-bg {
			width: 100%;
			height: 100%;
		}

		.head-wrap {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			width: 100%;
			z-index: 9;
			top: 0;

			.nav-title {
				font-size: 38rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(51, 51, 51, 1);
			}

			.status-bar {
				// #ifndef H5
				height: var(--status-bar-height);
				// #endif
				// #ifdef H5
				height: 50rpx;
				// #endif
				width: 750rpx;
			}
		}

		.user-head {
			padding-top: 0rpx;
			margin-top: -50rpx;
			.info-box {
				// padding: 0 20rpx;
				.head-img-wrap {
					position: relative;

					.refresh-btn {
						position: absolute;
						padding: 0;
						background: none;
						width: 34rpx;
						height: 34rpx;
						border-radius: 50%;
						background: #c9912c;
						top: 0;
						right: 20rpx;

						.cuIcon-refresh {
							color: #fff;
							font-size: 24rpx;
						}

						.refresh-rotate {
							transform: rotate(360deg);
							transition: all 0.2s;
						}
					}
				}

				.head-img {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					background: #ccc;
					margin-right: 25rpx;
					overflow: hidden;
				}

				.user-name {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(51, 51, 51, 1);
					line-height: 30rpx;
					width: 150rpx;
				}
			}

			.tag-box {
				background: rgba(255, 255, 255, 0.2);
				border-radius: 21rpx;
				line-height: 38rpx;
				padding-right: 10rpx;

				// margin-left: 10rpx;
				.cuIcon-refresh {
					color: #fff;
					margin: 0 10rpx;
				}

				.tag-img {
					width: 40rpx;
					height: 40rpx;
					margin-right: 6rpx;
					// border-radius: 50%;
				}

				.tag-title {
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(255, 255, 255, 1);
					line-height: 20rpx;
				}
			}

			.code-btn {
				background: none;

				.cuIcon-qr_code {
					font-size: 50rpx;
				}
			}
		}

		.wallet {
			font-size: 20rpx;
			padding-left: 140rpx;

			.money {
				margin-right: 40rpx;
			}
		}
	}

	// 订单卡片
	.order-wrap {
		background: #fff;
		width: 94%;
		border-radius: 16upx;
		margin: -88upx auto 30upx;

		.order-box {
			// flex: 4;
			height: 180rpx;
		}

		.all-order {
			position: relative;

			.cut-off--line {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: (750rpx/5) - 15rpx;
				width: 30rpx;
				height: 136rpx;
			}
		}

		.order-item {
			flex: 1;

			.item-box {
				position: relative;
			}

			.order-img {
				width: 66rpx;
				height: 66rpx;
				// background: #ccc;
			}

			.item-title {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(153, 153, 153, 1);
				line-height: 24rpx;
				padding-top: 10rpx;
			}
		}
	}

	// 绑定微信公众号
	.notice-box {
		width: 750rpx;
		height: 70rpx;
		background: rgba(253, 239, 216, 1);
		padding: 0 35rpx;

		.notice-detail {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: rgba(204, 149, 59, 1);
		}

		.bindPhone {
			width: 135rpx;
			height: 52rpx;
			background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
			border-radius: 26rpx;
			padding: 0;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
		}
	}

	// 钱包卡片
	.wallet-box {
		background: #fff;
		height: 180rpx;
		margin-bottom: 20rpx;
		position: relative;

		.wallet-left {
			flex: 4;
		}

		.wallet-right {
			position: relative;

			.cut-off--line {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: (750rpx/5) - 15rpx;
				width: 30rpx;
				height: 136rpx;
			}
		}

		.wallet-item {
			flex: 1;

			.wallet-img {
				width: 46rpx;
				height: 46rpx;
			}

			.wallet-item__detail {
				font-size: 38upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: $zhuse;
			}

			.wallet-item__title {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: rgba(153, 153, 153, 1);
				margin-top: 20rpx;
			}

			.item-balance::after {
				content: '元';
				font-size: 16rpx;
				margin-left: 4rpx;
			}

			.item-score::after {
				content: '个';
				font-size: 14rpx;
				margin-left: 4rpx;
			}

			.item-coupon::after {
				content: '张';
				font-size: 16rpx;
				margin-left: 4rpx;
			}
		}
	}

	.tools-box {
		background: #fff;

		// padding-bottom: 40rpx;

		margin: 0 auto;
		margin-bottom: 20rpx;
		width: 94%;
		border-radius: 16upx;

		.tool-item {
			display: flex;
			// justify-content: ;
			align-items: center;

			width: 95%;
			margin: 0 auto;

			// padding-top: 40rpx;
			.tool-img {
				width: 60rpx;
				height: 60rpx;
				// background: #ccc;
			}

			.item-title {
				width: 80%;
				font-size: 28rpx;
				font-family: PingFang SC;
				// font-weight: 500;
				color: #333;
				line-height: 24rpx;
				// padding-top: 30rpx;
				margin-left: 20rpx;
				// border-bottom: 1px solid #F6F6F6;
			}
		}
	}

	.foot_box {
		margin-top: 200rpx;
		padding-bottom: var(--window-bottom);
		margin-bottom: 50rpx;
	}

	.copyright {
		color: #999;

		.code1 {
			font-size: 24rpx;
		}

		.code2 {
			font-size: 20rpx;
			margin-top: 10rpx;
		}
	}
</style>
